<template>
    <div class="trade">
      <!-- 行业新闻 -->
      <div class="title">
        <p>行业新闻</p>
        <Breadcrumb>
          <BreadcrumbItem to="/">首页</BreadcrumbItem>
          <BreadcrumbItem to="news-trade">行业新闻</BreadcrumbItem>
        </Breadcrumb>
        <div class="divider"></div>
      </div>
      <div class="content">
        <ul>
          <li v-for="item in studyList_1" :key="item.id">
            <img :src="item.pic" />
            <div>
              <h2>{{ item.title }}</h2>
              <span
                ><Icon type="ios-time-outline" style="margin-right: 5px" />{{
                  item.date
                }}</span
              >
              <p>{{ item.detail }}</p>
              <router-link to="#">查看详情</router-link>
            </div>
          </li>
        </ul>
        <div class="page">
          <Page 
          :total="9"
          :page-size="3"
           /></div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
       studyList_1: [
          {
            id: 1,
            pic: require("../img/newslist4.jpg"),
            title: "提升员工专业技能，从细微处着手 ——奥来...",
            date: "2019-07-30",
            detail:
              "7月 28日，吉林奥来德光电材料股份有限公司公文写作基础与技能提升专题培训在公司总部成功举办。本次培训课程由中国公文写作学会会员、副教授、文学硕士韦志国主讲。公司各部门组长级以上员工、市场部、总经办全员参加了培训。",
          },
          {
            id: 2,
            pic: require("../img/newslist5.jpg"),
            title: "提升员工专业技能，从细微处着手 ——奥来...",
            date: "2019-07-30",
            detail:
              "7月 28日，吉林奥来德光电材料股份有限公司公文写作基础与技能提升专题培训在公司总部成功举办。本次培训课程由中国公文写作学会会员、副教授、文学硕士韦志国主讲。公司各部门组长级以上员工、市场部、总经办全员参加了培训。",
          },
          {
            id: 3,
            pic: require("../img/newslist2.jpg"),
            title: "提升员工专业技能，从细微处着手 ——奥来...",
            date: "2019-07-30",
            detail:
              "7月 28日，吉林奥来德光电材料股份有限公司公文写作基础与技能提升专题培训在公司总部成功举办。本次培训课程由中国公文写作学会会员、副教授、文学硕士韦志国主讲。公司各部门组长级以上员工、市场部、总经办全员参加了培训。",
          },
        ],
      };
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .trade {
    .title {
      position: relative;
      padding-left: 20px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #bebdbd;
      display: flex;
      justify-content: space-between;
      p {
        color: #333;
        font-size: 16px;
      }
      .divider {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 2px;
        background-color: var(--color-zdyblue);
      }
    }
    .content {
      padding: 30px 20px;
      ul {
        li {
          display: flex;
          justify-content: space-between;
          padding: 30px 0;
          border-bottom: 1px dashed #666;
          img {
          width: 272px;
          height: 172px;
        }
          div {
            display: flex;
            flex-direction: column;
            width: 650px;
            justify-content: space-around;
            color: #333;
            h2 {
              font-weight: normal;
            }
            span {
              color: #999;
            }
            p {
              color: #666;
            }
          }
        }
      }
      .page{
          margin-top: 10px;
          text-align: center;
      }
    }
  }
  </style>